<!DOCTYPE html>
<html lang="en">
<!-- ol中的li变色 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
        }

        .banner {
            margin: 0 auto;
            width: 800px;
            height: 600px;
            position: relative;
            overflow: hidden;
        }

        .banner ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 500%;
        }

        .banner ul li {
            float: left;
        }

        .banner ul li img {
            float: left;
            width: 800px;
            height: 600px;
        }

        a {
            text-decoration: none;
            font-size: 30px;
        }

        .left {
            /*控制左边切换按钮的位置*/
            position: absolute;
            left: 10px;
            top: 50%;
        }

        .right {
            /*控制右边切换按钮的位置*/
            position: absolute;
            right: 10px;
            top: 50%;
        }

        .circle {
            position: absolute;
            top: 94%;
            left: 50%;
        }

        .circle li {
            float: left;
            /* width: 5px;
            height: 5px; */
            margin-right: 15px;
            list-style-type: disc;
            color: pink;
            font-size: 25px;
        }

        .current {
            color: rgb(24, 223, 117) !important;
        }
    </style>
</head>

<body>
    <div class="bigbanner">
        <div class="banner">
            <ul>
                <li>
                    <a href="">
                        <img src="../动画原理/1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../动画原理/2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../动画原理/3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../动画原理/4.jpg" alt="">
                    </a>
                </li>
            </ul>
            <a href="#" class="left">&lt;</a>
            <a href="#" class="right">&gt;</a>
            <ol class="circle"></ol>
        </div>
    </div>
    <script>
        var banner = document.querySelector('.banner')
        var ul = banner.querySelector('ul')
        var ol = banner.querySelector('.circle')
        var left = document.querySelector('.left')
        var right = document.querySelector('.right')
        var bannerWidth = banner.offsetWidth;
        var nindex = 0
        function animate(obj, target, callback) {
            // 当我们不断点击按钮 元素速度会越来越快 因为开启了太多的定时器
            // 所以只让一个定时器执行 先清除之前的定时器 只保留一个定时器
            target = -target * bannerWidth;
            clearInterval(obj.timer)
            obj.timer = setInterval(function () {
                // 把步长值改为整数 不要出现小数的问题 不然数据会有误差
                // Math.ceil 将数值往大了取整  天花板函数
                var step = ((target - obj.offsetLeft) / 10);
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    // 停止动画的本质 就是停止定时器
                    clearInterval(obj.timer)
                    // 回调函数写在最后 也就是函数停止的地方
                    // if (callback) {//判断有没有回调函数 有才能执行
                    //     callback();
                    // }
                    callback && callback()
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15)
        }
        for (var i = 0; i < ul.children.length; i++) {
            // 创建一个 li
            var li = document.createElement('li')
            li.setAttribute('index', i)
            // 把li插入ol里面
            ol.appendChild(li)
            var lis = ol.querySelectorAll('li')
            // 节流阀 控制图片变化速度过快
            var flag = true;
            li.addEventListener('click', function () {
                ul.style.transition = '';
                if (flag) {
                    flag = false;
                    for (var i = 0; i < lis.length; i++) {
                        lis[i].className = '';
                    }
                    this.className = 'current';
                    console.log(this);
                    var index = this.getAttribute('index')
                    animate(ul, index, function () {
                        flag = true;
                    })
                }
            })
        }
        var text = null;
        text = setInterval(go, 1000)
        function arr(){
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
            }
            lis[nindex].className = 'current';
            console.log(lis[nindex]);
            ul.style.left = -nindex * 800 + 'px';
        }

        function go() {
            if (nindex == lis.length - 1) {
                nindex = -1
            }
            nindex++;
            arr()
        }
        right.addEventListener('click', go)
        left.addEventListener('click', function () {
            if (nindex == 0) {
                nindex = 4
            }
            nindex--;
            arr()
        })
        banner.addEventListener('mouseover', function () {
            clearTimeout(text)
        })
        banner.addEventListener('mouseout', function () {
            clearTimeout(text)
            text = setInterval(go, 1000)
        })
    </script>
</body>

</html>